<template>
  <card class="insure-card" title="违章记录" :showDivider="false">
    <table-index class="insure-card-table" :table="table" @loadData="loadData">
      <template #violantionCode="{ record }">
        <div>{{ record.violantionCode }}</div>
        <tag type="primary" v-for="(item, index) in record.violationLabelList" :key="index">
          {{ item }}
        </tag>
        <tag type="primary" v-if="record.cooperateHandleState">{{ record.cooperateHandleStateName }}</tag>
      </template>
      <template #violationFeeStateName="{ record }">
        <span v-if="(record.handleType == 2 || record.handleType === 3) && record.violationFeeState == 1">无需收款</span>
        <span v-else-if="record.violationFeeState == 2">未收款</span>
        <div v-else-if="record.violationFeeState == 3">已收款</div>
      </template>
      <template #urgePayStatus="{ record }">
        <p>{{ record.urgePayStatusName || '已催缴' }}</p>
        <a v-if="record.urgePayStatus == 1" @click="viewCallRecord(record)" class="view_record-style">催缴记录</a>
      </template>
    </table-index>
  </card>
  <!-- 催缴记录 -->
  <callRecord ref="call_record" />
</template>
<script setup lang="ts">
  import callRecord from '@/views/assets/operation/car-violation/call/callRecord.vue'

  import { ref, reactive, onMounted } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getList } from '@/api/asset/carViolation'

  const props = defineProps<{
    orderId: number
    eventType: string
  }>()
  const queryParam = reactive({
    orderId: props.orderId,
    eventType: props.eventType,
  })
  const table = useTable({
    queryParam,
    columns: [
      { title: '违章单号', dataIndex: 'violantionCode', slotName: 'violantionCode', fixed: 'left' },
      { title: '车牌号', dataIndex: 'licenseNo' },
      { title: '归属门店', dataIndex: 'siteName' },
      {
        title: '违章时间',
        width: 180,
        dataIndex: 'eventTime',
        sortable: { sortDirections: ['ascend', 'descend'] },
      },
      { title: '违章城市', dataIndex: 'eventCityName' },
      // { title: '违章地点', dataIndex: 'eventAddress' },
      // { title: '违章行为', dataIndex: 'eventContent' },
      { title: '罚分', dataIndex: 'eventScore' },
      { title: '罚款', dataIndex: 'eventAmount', unit: '元' },
      { title: '处理方', dataIndex: 'handleTypeName' },
      { title: '代办费用(元)', dataIndex: 'handleAmount' },
      { title: '违章代办真实成本', dataIndex: 'handleRealCost', unit: '元', width: 170 },
      { title: '违章状态', dataIndex: 'eventStatusStr' },
      { title: '费用状态', dataIndex: 'violationFeeStateName', slotName: 'violationFeeStateName' },
      { title: '催缴状态', dataIndex: 'urgePayStatusName', slotName: 'urgePayStatus' },
      { title: '负责人', dataIndex: 'staffName', fixed: 'right' },
    ],
  })

  // 查看催缴记录
  const call_record = ref()
  const viewCallRecord = (record: any) => {
    console.log(record)
    call_record.value.show(record.id)
  }

  const loadData = useFetchTableDataApi(table, queryParam, getList)

  onMounted(() => {
    loadData()
  })
</script>
<style scoped lang="less">
  .view_record-style {
    white-space: nowrap;
    cursor: pointer;
    color: rgb(24, 144, 255);
  }
</style>
